<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">一次</button>
    <script>
      var btn = document.getElementById('btn');
      //this 指向最后的调用者 //点击多次就会触发多次执行
    //   btn.onclick = function (event) {
    //     console.log('haha');
    //     console.log(this);
    //     console.log(event);
    //   };
      //仅执行一次的操作步揍，把点击事件的函数让返回函数执行,
      function once(fn){
        var flag = false //先默认没有被执行
        return function(){
            if(!flag){
                 //然后执行自己的函数,多次函数会修改this指向，看最后在哪调用，修改this指向
                fn.apply(this,arguments)
                //修改值
                flag = true
            }
           
           
        }
      }

      btn.onclick = once(function(){
        console.log('haha')
        console.log(this)
      })
    </script>
  </body>
</html>
